<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>{{proj['code']}} {{ '注解段落' if mode == 'para' else '段落对照' }}</title>
  {% include _/base_head.html %}
  <link href="{{static_url('css/proj-match.css')}}" rel="stylesheet"/>
  <link href="{{static_url('menu/jquery.contextMenu.css')}}" rel="stylesheet"/>
  {% if all_toc %}
  <link rel="stylesheet" href="{{static_url('jstree/jstree.min.css')}}"/>
  <script src="{{static_url('jstree/jstree.min.js')}}"></script>
  {% end %}
  <style>
    .proj-match .cell { width: 1%; }/*{{ col_w }}*/
    .proj-match .cell[colspan="2"] { width: 1%; }/*{{ 2*col_w }}*/
    .proj-match .cell[colspan="3"] { width: 1%; }/*{{ 3*col_w }}*/

    .col-name { cursor: not-allowed; }
    .sec { margin: 0; padding: 5px; }
    .sec.gray { font-style: italic; font-size: .8em; }

    @media (pointer: fine) {
        .text:hover, .toc_row:hover { color: var(--hover-color); cursor: context-menu; }
    }
    p.context-menu-active, .text.selected {
        color: var(--selected-color); font-weight: bold; }
    .proj-para .text.selected, .proj-para p.active { color: var(--hover-color) !important; }
    .swal2-shown .selected:not(.active) { font-weight: normal; }
    .error { color: red; font-weight: bold; }

    .text.del { text-decoration: line-through; }
    .app:not(.proj-para) .original:not(.single-article) > td {
        border-top: 2px solid red !important; }
  </style>
</head>

<body data-proj-id="{{_id}}" class="{{'show-sidebar' if all_toc else ''}}">
<ul class="nav-more">
  <li class="dropdown m-l-5">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
       aria-haspopup="true" aria-expanded="false">显示 <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li class="toggle-alert"><a>显示提示</a></li>
      <li><a onclick="$('body').toggleClass('hide-navbar')" title="切换是否隐藏顶部导航条">隐藏导航条</a></li>
      {% if all_toc %}
      <li role="separator" class="divider"></li>
      <li class="toggle-sidebar active" onclick="$('body').toggleClass('show-sidebar');$(this).toggleClass('active')"><a>显示科判栏</a></li>
      <li class="toggle-sidebar-width" onclick="$('.sidebar').toggleClass('wide')"><a>切换宽度</a></li>
      {% end %}
      {% if len(all_toc)>1 %}
      <li class="toggle-sidebar active" onclick="$('.sidebar').toggleClass('toc-n');$(this).toggleClass('active')"><a>显示第二科判</a></li>
      {% end %}
      {% if editable %}
      <li role="separator" class="divider"></li>
      <li><a onclick="importToc()">导入科判文本...</a></li>
      <li><a onclick="importTocHtml()">导入科判网页...</a></li>
      {% end %}
      <li role="separator" class="divider"></li>
      <li><a onclick="enlargeFont()">增加字号<span class="float-right">=</span></a></li>
      <li><a onclick="reduceFont()">减少字号<span class="float-right">-</span></a></li>
      <li><a onclick="resetFontSize()">默认字号</a></li>
      <li role="separator" class="divider"></li>
      <li><a id="theme-default" title="切换为普通外观">普通外观</a></li>
      <li><a id="theme-warm" title="切换为浅色外观、护眼色">护眼色</a></li>
      <li><a id="theme-dark" title="切换为深色外观">深色外观</a></li>
      {% if len(proj['columns']) > 1 %}
      <li role="separator" class="divider"></li>
      {% for i, c in enumerate(proj['columns']) %}
      <li class="toggle-col active" data-i="{{i}}"><a title="切换栏的可见性，要作合并为一组操作前需要显示出相关栏">{{i+1}} {{c['code']}} {{c['name']}}</a></li>
      {% end %}{% end %}
      {% if internal and is_owner %}
      <li role="separator" class="divider"></li>
      <li><a onclick="fixRows()" title="根据段落数据修复已合并的不一致数据">数据修复</a></li>
      {% end %}
    </ul>
  </li>
</ul>

<div class="app proj-{{mode}}">
  {% module TopNav('注解段落' if mode == 'para' else '段落对照', prev=dict(cls='name', url='/proj/edit/' + _id, title=proj['short_name']), themes=False) %}
  <div class="container-fluid m-t-n10">
    <div class="app-body">
      {% if all_toc %}
      {% set toc_i = ([i for i,a in enumerate(all_toc) if a['new']] or [
        i for i, a in enumerate(all_toc) if a['cur']] or [0])[0] %}
      <div class="sidebar toc-{{'n' if len(all_toc)>1 else '1'}}">
        <div class="toc-tree-p" data-ext="1">
          {% module TocDropdown(all_toc, toc_i) %}
          <div id="toc-tree1" class="toc-tree"><div></div></div>
        </div>
        {% if len(all_toc)>1 %}
        {% set toc_j = [i for i,a in enumerate(all_toc) if i!=toc_i][0] %}
        <div class="toc-tree-p" data-ext="2">
          {% module TocDropdown(all_toc, toc_j, '1') %}
          <div id="toc-tree2" class="toc-tree"><div></div></div>
        </div>
        {% end %}
      </div>
      {% end %}
      <div class="columns-p swal-autoscroll">
        <div class="alert alert-info alert-dismissible" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <strong>提示：</strong> 在各栏中依次 点击、拉选 或 <span class="btn-key">Shift</span>+点击 要同组的段落，按 <span class="btn-key">回车</span> 合并为一组。<br/>
          如需 拆分段落 或 插入科判条目 可在段落上点鼠标右键菜单或长按 或点击 <span class="p-head"></span> 段首标记。<br/>
          除“合并为一组”外其余项仅对当前单元格中的选择有效，<span class="btn-key">Esc</span>或跨栏选择可清除选择。
        </div>
        {% if max_page %}{% module Pager(pi, max_page, 'm-t-0 m-r-10 m-b-5') %}{% end %}
        <div class="table-p">
          <table class="{{'single-article' if len(proj['columns']) == 1 else ''}}">
        {% for r in proj.get('rows', []) %}
        <tr class="merged columns" data-row-i="{{r['row_i']}}">
          {% for i, c in enumerate(proj['columns']) %}
          <td class="cell" colspan="{{ c.get('colspan', 1) }}" data-i="{{i}}" data-id="{{c['a_id']}}">
            {% module SectionBlock(c, r['row_i']) %}
          </td>{% end %}
        </tr>{% end %}
        <tr class="original columns{{' single-article' if len(proj['columns']) == 1 else ''}}" data-row-i="0">
          {% for i, c in enumerate(proj['columns']) %}
          <td class="cell" colspan="{{ c.get('colspan', 1) }}" data-i="{{i}}" data-id="{{c['a_id']}}" data-toc-i="{{c.get('toc_i','')}}">
            <div class="sel-tip no-select" data-i="{{i}}">选中</div>
            {% module SectionBlock(c) %}
          </td>{% end %}
        </tr>
        </table></div>
        {% if max_page %}{% module Pager(pi, max_page, 'm-b-0 m-r-10') %}{% end %}
      </div>
    </div>
  </div>
</div>
<script>
  window.edit_mode = '{{mode}}'
  window.p_tags = {% raw P_TAGS %}
  window.editable = {{int(editable)}}
</script>
{% include _/base_foot.html %}
<script src="{{static_url('menu/jquery.contextMenu.js')}}"></script>
<script src="{{static_url('js/proj.js')}}"></script>
<script src="{{static_url('js/toc.js')}}"></script>
<script src="{{static_url('js/proj-match.js')}}"></script>
<script src="{{static_url('js/download.js')}}"></script>
<script>
  function fixRows() {
    postApi('/proj/match/fix/{{_id}}', {}, reloadPage)
  }
  {% if all_toc %}tocLoad('1', `{{ all_toc[toc_i]['a_id'] }}`, `{{ all_toc[toc_i]['toc_i'] }}`){% end %}
  {% if len(all_toc)>1 %}tocLoad('2', `{{ all_toc[toc_j]['a_id'] }}`, `{{ all_toc[toc_j]['toc_i'] }}`){% end %}
</script>
</body>
</html>